<template>
  <div>
    <!-- 顶部导航 -->
    <!-- <Header :active-index="activeIndex"></Header> -->

    <!-- banner -->
    <div>
      <el-carousel :height="bannerHeight + 'px'">
        <el-carousel-item>
          <div>
            <img ref="imgHeight" class="banner_img" src="./images/1.jpg" alt="">
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div>
            <img ref="imgHeight" class="banner_img" src="./images/2.jpg" alt="">
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div>
            <img ref="imgHeight" class="banner_img" src="./images/3.jpg" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin-top: 40px;">
      <el-row type="flex" justify="center" :gutter="16">
        <el-col :span="4">
          <router-link to="/product">
            <div>
              <img class="product_img" src="./images/m1.jpg" alt="">
            </div>
          </router-link>
        </el-col>
        <el-col :span="4">
          <div>
            <img class="product_img" src="./images/m2.jpg" alt="">
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <img class="product_img" src="./images/m3.jpg" alt="">
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <h1>驾培互联网服务领导者</h1>
      <div>正在服务1000万驾考用户，364家驾校，行走在驾培改革最前沿</div>
    </div>

  </div>
</template>

<script>
import Header from '../../components/Header.vue'

export default {
  data () {
    return {
      activeIndex: '1',
      bannerHeight: 440
    }
  },

  components: {
    Header
  },

  methods: {
    /**
     * 设置banner高度自适应
     */
    setBannerHeight () {
      while (this.bannerHeight === 0) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.bannerHeight = this.$refs.imgHeight.height
          }, 0)
        })
      }
    }
  },

  mounted () {
    this.setBannerHeight()
    window.addEventListener('resize', () => {
      this.setBannerHeight()
    }, false)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner_img, .product_img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.product_img:hover{
  transition: all 0.4s;
  transform: scale(1.05);
}
</style>
